<template>
  <div class="page-header">
    <div class="page-header-content">
      <div class="title-section" :class="{ 'with-subtitle': subtitle }">
        <h1 class="page-title">{{ title }}</h1>
        <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
      </div>
      
      <el-breadcrumb v-if="showBreadcrumb" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in finalBreadcrumbItems" :key="index" :to="item.path">
          {{ item.text }}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="currentText">{{ currentText }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="header-bg" :style="bgStyle"></div>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  props: {
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String,
      default: ''
    },
    showBreadcrumb: {
      type: Boolean,
      default: true
    },
    breadcrumbItems: {
      type: Array,
      default: () => []
    },
    breadcrumb: {
      type: Array,
      default: () => []
    },
    currentText: {
      type: String,
      default: ''
    },
    bgImage: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#1e90ff'
    }
  },
  computed: {
    bgStyle() {
      if (this.bgImage) {
        return {
          backgroundImage: `url(${this.bgImage})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        };
      }
      return {
        backgroundColor: this.bgColor
      };
    },
    finalBreadcrumbItems() {
      if (this.breadcrumbItems && this.breadcrumbItems.length > 0) {
        return this.breadcrumbItems;
      }
      if (this.breadcrumb && this.breadcrumb.length > 0) {
        return this.breadcrumb.map(item => ({
          text: item.text,
          path: item.link
        }));
      }
      return [];
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  position: relative;
  color: #fff;
  padding: 40px 0;
  margin-bottom: 30px;
  overflow: hidden;
  
  .page-header-content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
    .title-section {
      margin-bottom: 10px;
      
      &.with-subtitle {
        margin-bottom: 20px;
      }
      
      .page-title {
        font-size: 32px;
        font-weight: bold;
        margin: 0 0 10px 0;
      }
      
      .page-subtitle {
        font-size: 16px;
        opacity: 0.8;
        margin: 0;
      }
    }
  }
  
  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e90ff;
    z-index: 1;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4));
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .page-header {
    padding: 30px 0;
    
    .page-header-content {
      .title-section {
        .page-title {
          font-size: 24px;
        }
        
        .page-subtitle {
          font-size: 14px;
        }
      }
    }
  }
}
</style> 